<template>
    <div>
        <el-container>
            <el-header>气象局合同管理系统</el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu background-color="blue" text-color="#fff" :router="true" :default-active="active">
                        <el-sub-menu v-for="item in menuData" :key="item.label" :index="item.label">
                            <template #title>
                               {{ item.label }}
                            </template>
                            <el-menu-item v-for="v in item.children" :key="v.label" :index="'/main/'+v.path">
                                <component :is="v.icon"></component>   {{v.label }}
                            </el-menu-item>
                        </el-sub-menu>

                        <el-menu-item index="/login" @click="logout">退出登录</el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view>

                    </router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script setup lang="ts">
import router from '@/router';
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { getMenu } from '@/api/api';
import { useRouteStore } from '@/stores/routeStores';
const Store =useRouteStore();
const active = ref("");
const route = useRoute()
active.value = route.path;
// 退出登录
const logout = () => {
    sessionStorage.clear();
    // 清空本地存储内容
}
const menuData = ref<any[]>([]);
onMounted(async () => {
    const res = await getMenu({ page: 1, limit: 20 });
    // console.log(res);
    const menu: any[] = [];
    let arr=res.data.data.filter(v=>Store.menu.includes(v.label))
    arr.forEach(v => {
        let obj = menu.find(item => item.label === v.parent);
        if (obj) {
            obj.children.push({
                label: v.label,
                        icon: v.icon,
                        path: v.path,
            })
        } else {
            menu.push({
                label: v.parent,
                children: [
                    {
                        label: v.label,
                        icon: v.icon,
                        path: v.path,
                    }
                ]
            })
        }
    });
    menuData.value = menu;
    console.log(menu);
    
})
</script>
<style scoped>
.el-container {
    --el-menu-active-color: #999;
}

.el-header {
    background-color: blue;
    color: #fff;
}

.el-aside {
    background-color: blue;
    height: calc(100vh - 60px);
}
</style>